<template>
  <div class="cartoon-form">
    <el-card :style="{ width: '950px', height: '650px', padding: '20px' }">
      <el-tabs v-model="activeName" tab-position="left" class="profile-card">
        <el-tab-pane label="普通(单机)版" name="info">
          <user-demand></user-demand>
        </el-tab-pane>
        <el-tab-pane label="AI 版" name="control">
          <user-demand-ai></user-demand-ai>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import UserDemandAi from "./user-demand-ai.vue";
import UserDemand from "./user-demand.vue";
import DeliveryControl from "./delivery-control.vue";

const activeName = ref('info');

</script>


<style scoped>
.radio-group-container {
  margin-bottom: 20px;
}
.cartoon-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-step {
  margin-bottom: 20px;
}
.cartoon-form {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input, .el-select {
  width: 100% !important;
}

.el-input__inner, .el-select .el-input__inner {
  box-sizing: border-box !important;
}

.el-select .el-input__inner {
  width: 100% !important;
}

.el-button {
  font-family: 'Arial', sans-serif;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
  color: #fff;
}

.el-button:hover {
  background-color: #ec971f;
  border-color: #ec971f;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>

